<template>
	<view class="container">
		<c-navBar title="重新上传" isPerch></c-navBar>
		<view class="content">

			<view class="item">
				<view class="title">上传开始使用图片</view>
				<view style="margin-top: 24rpx;">
					<c-upLoadImgs :projectName='projectName' ref="uploadImg" watermark :file.sync="file1" :maxCount="6"></c-upLoadImgs>
				</view>
			</view>



			<view class="item flex" @click="show=true">
				<view class="title">单位</view>
				<view class="input">
					{{detail.useType?detail.useType:'请选择'}}
				</view>
			</view>

			<view class="item flex">
				<view class="title">结束使用时长</view>
				<input v-model="detail.useValue" class="input" type="digit" placeholder="请输入" />
			</view>

			<view class="item">
				<view class="title">上传结束使用图片</view>
				<view style="margin-top: 24rpx;">
					<c-upLoadImgs :projectName='projectName' ref="uploadImg" watermark :file.sync="file2"
						:maxCount="6"></c-upLoadImgs>
				</view>
			</view>
			<view class="item">
				<view class="title">说明</view>
				<textarea style="margin-top: 24rpx;" class="textarea" v-model="detail.endMessage" placeholder="请输入" />
			</view>

		</view>


		<view class="btn-box">
			<view class="btn" @click="submit">提交</view>
		</view>

		<u-picker :show="show" :columns="name=='worker'?columns1:columns" @confirm="confirm" @cancel="show=false"
			immediateChange></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				file1: [],
				file2: [],
				detail: {},
				name: '',
				id: '',
				show: false,
				columns: [
					['小时', '次数', '台班', '工天']
				],
				columns1: [
					['小时', '工天']
				],
				projectName: ''
			}
		},
		onLoad({
			name,
			id,
			projectName
		}) {
			this.name = name;
			this.id = id;
			this.projectName = projectName
			this.getDetail();
		},
		onShow() {

		},
		methods: {
			// 选择单位
			confirm(v) {
				this.detail.useType = v.value[0]
				console.log(v, 'v');
				this.show = false
			},


			// 详情
			getDetail() {
				if (this.name == 'worker') {
					this.$api.workerTaskDetail({
						id: this.id
					}).then(res => {
						console.log(res, '详情');
						if (res.code == 200) {
							this.detail = res.data;
							this.file1 = res.data.startImage.split(',')
							this.file2 = res.data.endImage.split(',')
						}
					})
				} else {
					this.$api.machineTaskDetail({
						id: this.id
					}).then(res => {
						console.log(res, '详情');
						if (res.code == 200) {
							this.detail = res.data;
							this.file1 = res.data.startImage.split(',')
							this.file2 = res.data.endImage.split(',')
						}
					})
				}
			},
			// 提交事件
			submit() {
				if (this.file1.length == 0) {
					uni.showToast({
						title: '请上传开始使用图片',
						icon: 'none'
					})
					return
				}
				if (this.detail.startStatus == '2' && this.file2.length == 0) {
					uni.showToast({
						title: '请上传结束使用图片',
						icon: 'none'
					})
					return
				}


				if (!this.detail.useType) {
					return uni.showToast({
						icon: "none",
						title: "请输入单位"
					})
				} else if (!this.detail.useValue) {
					return uni.showToast({
						icon: "none",
						title: "请输入结束使用时长"
					})
				} else if (!this.detail.endMessage) {
					return uni.showToast({
						icon: "none",
						title: "请输入结束使用原因"
					})
				} else if (!this.$refs.uploadImg.complete) {
					return uni.showToast({
						icon: "none",
						title: "图片上传完成后再试"
					})
				}




				if (this.name == 'worker') {
					this.$api.workerTaskUpdate({
						id: this.id,
						endStatus: '3',
						useStatus: '4',
						startImage: this.file1?.toString(','),
						endImage: this.file2?.toString(','),

						endMessage: this.detail.endMessage,
						useType: this.detail.useType,
						useValue: this.detail.useValue

					}).then(res => {
						if (res.code == 200) {
							console.log('任务开始')
							uni.navigateBack()
						}
					})
				} else {
					this.$api.machineTaskUpdate({
						id: this.id,
						endStatus: '3',
						useStatus: '4',
						startImage: this.file1?.toString(','),
						endImage: this.file2?.toString(','),

						endMessage: this.detail.endMessage,
						useType: this.detail.useType,
						useValue: this.detail.useValue
					}).then(res => {
						if (res.code == 200) {
							console.log('任务开始')
							uni.navigateBack()
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		// .content {
		// 	padding: 20rpx 32rpx;

		// 	.title {
		// 		font-weight: bold;
		// 		font-size: 36rpx;
		// 		color: #1A1A1A;
		// 		margin-bottom: 24rpx;
		// 	}

		// 	.text {
		// 		font-weight: 400;
		// 		font-size: 28rpx;
		// 		color: #666666;
		// 	}
		// }
	}



	.item {
		padding: 32rpx 0;
		margin: 0rpx 32rpx;
		border-bottom: 1rpx solid #E6E6E6;

		.title {
			font-weight: bold;
			font-size: 36rpx;
			color: #1A1A1A;
			text-wrap: nowrap;
		}

		.input {
			text-align: right;
			color: #999999;
		}

		input::-webkit-input-placeholder {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}



		.textarea {
			width: 94%;
			height: 200rpx;
			background: #FAFAFA;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			margin-bottom: 32rpx;
			padding: 24rpx;
		}

		textarea::-webkit-input-placeholder {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}


	}
</style>